<template>
  <view class="post-details">
    <view class="forum-details">
      <view class="item">
        <view class="item-user">
          <up-image
            :show-loading="true"
            shape="circle"
            :src="dataInfo.pathUrl"
            width="40px"
            height="40px"
          ></up-image>
          <view class="user-name">
            <text class="title">{{ dataInfo.userName }}</text>
            <view class="time">
              <text>{{ dataInfo.time }}</text>
              <text>阅读量{{ dataInfo.collect }}</text>
            </view>
          </view>
        </view>
        <view class="title">{{ dataInfo.title }}</view>
        <view class="item-comment">
          <view>亲爱的疆友们：</view>
          <view class="comment">{{ dataInfo.comment }}</view>
        </view>
      </view>
    </view>
    <img class="img-pilot" :src="dataInfo.pilotUrl" />
    <view class="item-icon">
      <view class="icon">
        <up-icon name="thumb-up" size="30" @click="iconChange(item, 1)"></up-icon>
        <text>{{ dataInfo.like }}</text>
      </view>
      <view class="icon">
        <up-icon name="chat" size="30" @click="iconChange(item, 2)"></up-icon>
        <text>{{ dataInfo.commentCount }}</text>
      </view>
      <view class="icon">
        <up-icon name="share" size="30" @click="iconChange(item, 3)"></up-icon>
        <text>{{ dataInfo.share }}</text>
      </view>
      <view class="icon">
        <up-icon name="star" size="30" @click="iconChange(item, 4)"></up-icon>
        <text>{{ dataInfo.collect }}</text>
      </view>
    </view>
    <view class="footer">
      <text>评论（0）</text>
      <text>暂无评论，快来发表第一条评论吧</text>
    </view>
  </view>
  <view class="tabbar">
    <view class="tabbar-button">
      <up-input
        cursorColor="red"
        shape="circle"
        placeholder="写评论..."
        v-model="dataInfo.commentContent"
      ></up-input>
      <view class="send">发送</view>
    </view>
  </view>
</template>
<script setup lang="ts">
const dataInfo = ref<any>({
  id: 1,
  pathUrl:
    "https://img2.baidu.com/it/u=3094987369,2055473366&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=626",
  userName: "zyz",
  time: "2025-08-14 16:54:15",
  title: "[无人机租赁] 正式与您相遇",
  comment: `当清晨的第一缕阳光洒在天山脚下，当无人机的轰鸣声略过广袤的田野，
  我们怀着无比激动的心情，向您宣告：\n[无人机租赁]正式版本今日上线！\n这个承载着无数期待与梦想的平台，终于在这个充满希望的时刻，与您温暖相遇。`,
  pilotUrl:
    "https://img0.baidu.com/it/u=3997995284,3408795002&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1167",
  like: 10,
  commentCount: 20,
  share: 10,
  collect: 30,
});
const iconChange = (item: any, index: any) => {};
</script>
<style lang="scss" scoped>
.post-details {
  padding: 20px;
  height: 100vh;
  overflow: auto;
  .forum-details {
    .item {
      border-radius: 6px;
      background-color: white;

      .item-user {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .user-name {
          display: flex;
          flex-direction: column;
          padding-left: 10px;
          line-height: 1.8;
          .time {
            display: flex;
            color: #b0b0b0;
          }
        }
      }
      .title {
        font-size: 18px;
        font-weight: bold;
        color: #000;
        padding: 10px 0;
      }
    }
  }
  .comment {
    white-space: pre-wrap;
  }
  .img-pilot {
    width: 100%;
    max-height: 220px;
    border-radius: 6px;
    margin: 10px 0;
  }
  .item-icon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    // margin-top: 10px;
    padding: 10px 0;
    border-top: 1px solid #f2f2f2;
    .icon {
      display: flex;
      align-items: center;
      text {
        font-size: 14px;
      }
    }
  }
  .footer {
    display: flex;
    flex-direction: column;
    color: #333333;
    margin-top: 20px;
    text {
      &:nth-child(2) {
        text-align: center;
        color: #999999;
        padding-top: 50px;
      }
    }
  }
}
.tabbar {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #ffffff;
  .tabbar-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-top: 1px solid #f0f0f0;
    margin: 0 -5px;
    .send {
      padding-left: 20px;
      color: #b5b4b0;
    }
  }
}
</style>
